<html>
  <head>
    <meta name="viewport" content="width=device-width" />
    <meta charset="utf-8" />
    <title>&lt;qr-code&gt; Web Component</title>
    <meta
      name="description"
      content="The @bitjson/qr-code web component is a no-framework, no-dependencies, customizable, animate-able, SVG-based &lt;qr-code&gt; HTML element."
    />
    <meta property="og:title" content="@bitjson/qr-code Web Component" />
    <meta
      property="og:description"
      content="The @bitjson/qr-code web component is a no-framework, no-dependencies, customizable, animate-able, SVG-based &lt;qr-code&gt; HTML element."
    />
    <meta
      property="og:image"
      content="https://qr.bitjson.com/.github/social.png"
    />
    <meta property="og:url" content="https://qr.bitjson.com/" />
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@bitjson" />
    <meta name="twitter:title" content="@bitjson/qr-code Web Component" />
    <meta
      name="twitter:description"
      content="The @bitjson/qr-code web component is a no-framework, no-dependencies, customizable, animate-able, SVG-based &lt;qr-code&gt; HTML element."
    />
    <meta
      name="twitter:image"
      content="https://qr.bitjson.com/.github/social.png"
    />
    <link rel="icon" href="favicon.ico" />

    <!-- The latest @bitjson/qr-code release: -->
    <script src="https://unpkg.com/@bitjson/qr-code@1.0.2/dist/qr-code.js"></script>
    <!-- Just used for styling the code-blocks below: -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/@highlightjs/cdn-assets@11.7.0/styles/github-dark.min.css"
    />
    <script src="https://unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>
  </head>
  <body
    style="
      text-align: center;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      line-height: 1.5;
    "
  >
    <h1 style="margin-top: 2em">@bitjson/qr-code</h1>

    <p>
      A no-framework, no-dependencies, customizable, animate-able, SVG-based
      &lt;qr-code&gt; HTML element.
      <a href="https://github.com/bitjson/qr-code">Open source &rarr;</a>
    </p>

    <div style="min-height: 200px; margin: 2em">
      <qr-code
        id="qr1"
        contents="https://blog.bitjson.com/cashtokens-v2/"
        module-color="#1c7d43"
        position-ring-color="#13532d"
        position-center-color="#70c559"
        style="
          width: 200px;
          height: 200px;
          margin-left: auto;
          margin-right: auto;
          background-color: #fff;
        "
      >
        <img src="src/assets/bch.svg" slot="icon" />
      </qr-code>
      <script>
        document.getElementById('qr1').addEventListener('codeRendered', () => {
          document.getElementById('qr1').animateQRCode('MaterializeIn');
        });
      </script>
    </div>

    <p>
      <button onclick="fadeIn()">Custom Fade In</button>
      <button
        onclick="document.getElementById('qr1').animateQRCode('RadialRipple');"
      >
        Ripple
      </button>
      <button onclick="fadeOut()">Custom Fade Out</button>
    </p>

    <script>
      function fadeIn() {
        document
          .getElementById('qr1')
          .animateQRCode((targets, _x, _y, _count, entity) => ({
            targets,
            from: entity === 'module' ? Math.random() * 200 : 200,
            duration: 500,
            easing: 'cubic-bezier(1,1,0,.5)',
            web: {
              opacity: [0, 1],
              scale: [0.3, 1.13, 0.93, 1],
            },
          }));
      }
      function fadeOut() {
        document
          .getElementById('qr1')
          .animateQRCode((targets, _x, _y, _count, entity) => ({
            targets,
            from: entity === 'module' ? Math.random() * 200 : 200,
            duration: 500,
            easing: 'cubic-bezier(.5,0,1,1)',
            web: {
              opacity: [1, 0],
              scale: [1, 1.1, 0.5],
            },
          }));
      }
    </script>

    <p>Other presets: (pull requests welcome!)</p>

    <p>
      <button
        onclick="document.getElementById('qr1').animateQRCode('RadialRippleIn');"
      >
        RadialRippleIn
      </button>
      <button
        onclick="document.getElementById('qr1').animateQRCode('RadialRipple');"
      >
        RadialRipple
      </button>
      <button
        onclick="document.getElementById('qr1').animateQRCode('MaterializeIn');"
      >
        MaterializeIn
      </button>
      <button
        onclick="document.getElementById('qr1').animateQRCode('FadeInTopDown');"
      >
        FadeInTopDown
      </button>
      <button
        onclick="document.getElementById('qr1').animateQRCode('FadeInCenterOut');"
      >
        FadeInCenterOut
      </button>
    </p>

    <p style="max-width: 500px; margin-left: auto; margin-right: auto">
      The QR code above is rendered by the following pure HTML:
    </p>

    <pre
      style="
        text-align: left;
        padding: 0 2em;
        color: #c9d1d9;
        background: #0d1117;
      "
    ><code class="language-html">
&lt;qr-code
  id="qr1"
  contents="https://blog.bitjson.com/cashtokens-v2/"
  module-color="#1c7d43"
  position-ring-color="#13532d"
  position-center-color="#70c559"
  style="
    width: 200px;
    height: 200px;
    margin: 2em auto;
    background-color: #fff;
  "
&gt;
  &lt;img src="src/assets/bch.svg" slot="icon" /&gt;
&lt;/qr-code&gt;

&lt;script&gt;
  document.getElementById('qr1').addEventListener('codeRendered', () => {
    document.getElementById('qr1').animateQRCode('MaterializeIn');
  });
&lt;/script&gt;
    </code></pre>

    <p style="max-width: 500px; margin-left: auto; margin-right: auto">
      Design your own custom animations! Just pass a function to the
      <code>qr-code</code>'s <code>animateQRCode</code> method.
    </p>
    <p style="max-width: 500px; margin-left: auto; margin-right: auto">
      Animate in, animate on user interactions &mdash;
      <strong>like a URL hit or a detected payment</strong>, and animate out
      when the QR interaction is complete. For example, here's the entire
      definition for the <code>Custom Fade Out</code> used above:
    </p>

    <pre
      style="
        text-align: left;
        padding: 0 2em;
        color: #c9d1d9;
        background: #0d1117;
      "
    ><code class="language-js">
document.getElementById('qr1').animateQRCode((targets, _x, _y, _count, entity) => ({
  targets,
  from: entity === 'module' ? Math.random() * 200 : 200,
  duration: 500,
  easing: 'cubic-bezier(.5,0,1,1)',
  web: { opacity: [1, 0], scale: [1, 1.1, 0.5] }
}));
    </code></pre>

    <footer style="margin-bottom: 6em">
      <p>Made by <a href="https://twitter.com/bitjson">@bitjson</a></p>
      <small>
        <p><a href="https://bitjson.com">bitjson.com</a></p>
      </small>
    </footer>
    <script>
      hljs.highlightAll();
    </script>
  </body>
</html>
